<template>
  <div class="toll">
    <div class="header">
      <a-select
        default-value="请选择年份"
        style="width: 33.33%; background-color: #4783f1"
        @change="handleChange"
      >
        <a-select-option value="2020年">
          2020年
        </a-select-option>
        <a-select-option value="2019年">
          2019年
        </a-select-option>
        <a-select-option value="2018年">
          2018年
        </a-select-option>
      </a-select>
      <a-select
        default-value="请选择月份"
        style="width: 33.33%"
        @change="handleChangeMonth"
      >
        <a-select-option value="1月">
          1月
        </a-select-option>
        <a-select-option value="2月">
          2月
        </a-select-option>
        <a-select-option value="3月">
          3月
        </a-select-option>
        <a-select-option value="4月">
          4月
        </a-select-option>
        <a-select-option value="5月">
          5月
        </a-select-option>
        <a-select-option value="6月">
          6月
        </a-select-option>
        <a-select-option value="7月">
          7月
        </a-select-option>
        <a-select-option value="8月">
          8月
        </a-select-option>
        <a-select-option value="9月">
          9月
        </a-select-option>
        <a-select-option value="10月">
          10月
        </a-select-option>
        <a-select-option value="11月">
          11月
        </a-select-option>
        <a-select-option value="12月">
          12月
        </a-select-option>
      </a-select>
      <a-select
        default-value="请选择收费站"
        style="width: 33.33%"
        @change="changeToll"
      >
        <a-select-option
          :value="item.tollboothname"
          v-for="item in tollBooth"
          :key="item.tollboothcode"
          :title="item.tollboothname"
        >
          {{ item.tollboothname }}
        </a-select-option>
      </a-select>
      <div class="left">
        <ul>
          <li>工作人员</li>
          <li>{{ nowInfo.chargecount || tollInfo.chargecount }}人</li>
        </ul>
      </div>
      <div class="middle">
        <ul>
          <li>收费员</li>
          <li>{{ nowInfo.usercount ||  tollInfo.usercount }}人</li>
        </ul>
      </div>
      <div class="right">
        <ul>
          <li>后勤</li>
          <li>{{  nowInfo.logisticscount || tollInfo.logisticscount }}人</li>
        </ul>
      </div>
    </div>
    <div class="line"></div>
    <!--    车流量表格-->
    <div
      class="traffic"
      id="myChart"
      style="width: 100%; height: 326px;background-color: #fff"
    ></div>
    <div class="line"></div>
    <!--    收入表格-->
    <div
      class="income"
      id="myChart1"
      style="width: 100%; height: 326px;background-color: #fff"
    ></div>
  </div>
</template>

<script>
// 导入图标库
import echarts from 'echarts'
import { getTollSelect, getSevenInfo } from './../../../api'

const ydata1 = []
const ydata2 = []
let option1, option2
export default {
  name: 'Toll',
  data () {
    return {
      // 收费站信息函数
      tollBooth: [],
      // 7天内车流量
      seventoflow: [],
      // 7天内每天收入情况
      seventtoincome: [],
      // 收费站信息
      tollInfo: {},
      // 获取年的数字
      yearValue: '',
      // 获取月的数字
      monthValue: '',
      // 收费站id
      tollId: '',
      nowInfo: '' // 默认显示的数据
    }
  },
  mounted () {
    // 绘制车流量表格
    this.drawLine()
    // 绘制收入表格
    this.drawIncome()
    // 获取收费站下拉列表
    this.getTollSelectData()
    // 获取7天内车流量和收入信息
    this.getSevenInfoData()
    // this.getInfoById()
    this.getNowInfo()
  },
  methods: {

    drawLine () {
      this.chartLine = echarts.init(document.getElementById('myChart'))
      // 指定图表的配置项和数据
      // console.log(this.seventoflow)
      // console.log(data)
      option1 = {
        // 添加主标题
        title: {
          text: '最近7天车流量',
          textStyle: {
            color: '#2e2e2e',
            fontSize: 17.5
          }
        },
        tooltip: {
          // 设置tip提示
          trigger: 'axis'
        },
        color: ['#1ec6c4'], // 设置每一个拐点的颜色
        xAxis: {
          // 设置x轴
          type: 'category',
          boundaryGap: false, // 坐标轴两边不留白
          data: ['第1天', '第2天', '第3天', '第4天', '第5天', '第6天', '第7天'],
          name: '时间轴', // X轴 name
          nameTextStyle: {
            // 坐标轴名称的文字样式
            color: '#000',
            fontSize: 10,
            padding: [70, 15, 0, 15],
            align: 'right',
            lineHeight: 122
          },
          axisLine: {
            // 坐标轴轴线相关设置。
            lineStyle: {
              color: '#000',
              type: 'dotted'
            }
          }
        },
        yAxis: {
          name: '停放量',
          nameTextStyle: {
            color: '#000',
            fontSize: 10
          },
          axisLine: {
            lineStyle: {
              color: '#000',
              type: 'dotted'
            }
          },
          splitLine: {
            lineStyle: {
              type: 'dotted'
            },
            show: true
          },
          type: 'value'
        },
        series: [
          {
            name: '停放量',
            data: ydata1,
            // data: [263, 266, 207, 171, 154, 204, 269],
            type: 'line', // 类型为折线图
            symbol: 'circle', // 修改拐点的样式
            showSymbol: true, // 是否显示
            symbolInnerColor: '#1ec6c4',
            lineStyle: {
              // 线条样式 => 必须使用normal属性
              normal: {
                color: '#1ec6e4'
              },
              type: 'dotted'
            }
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      this.chartLine.setOption(option1)
    },
    drawIncome () {
      this.chartLine = echarts.init(document.getElementById('myChart1'))
      // 指定图表的配置项和数据
      option2 = {
        // 添加主标题
        title: {
          text: '最近7天收入',
          textStyle: {
            color: '#2e2e2e',
            fontSize: 17.5
          }
        },
        tooltip: {
          // 设置tip提示
          trigger: 'axis'
        },
        color: ['#efefef'], // 设置区分（每条线是什么颜色，和 legend 一一对应）
        xAxis: {
          // 设置x轴
          type: 'category',
          boundaryGap: false, // 坐标轴两边不留白
          data: ['第1天', '第2天', '第3天', '第4天', '第5天', '第6天', '第7天'],
          // data: function () {
          //   const list = []
          //   list.push(Object.keys(this.tollInfo.incomeMap))
          //   // console.log(this.tollInfo.incomeMap)
          //   return list
          // },
          name: '时间轴', // X轴 name
          nameTextStyle: {
            // 坐标轴名称的文字样式
            color: '#000',
            fontSize: 10,
            padding: [70, 15, 0, 15],
            align: 'right',
            lineHeight: 122
          },
          axisLine: {
            // 坐标轴轴线相关设置。
            lineStyle: {
              color: '#000',
              type: 'dotted'
            }
          }
        },
        yAxis: {
          name: '收入',
          nameTextStyle: {
            color: '#000',
            fontSize: 10
          },
          axisLine: {
            lineStyle: {
              color: '#000',
              type: 'dotted'
            }
          },
          splitLine: {
            lineStyle: {
              type: 'dotted'
            },
            show: true
          },
          type: 'value'
        },
        series: [
          {
            name: '收入',
            // data: [4320, 179, 705, 844, 4031, 2680, 1249],
            data: ydata2,
            type: 'line', // 类型为折线图
            symbol: 'circle', // 修改拐点的样式
            showSymbol: true, // 是否显示
            lineStyle: {
              // 线条样式 => 必须使用normal属性
              normal: {
                color: '#aea9fc'
              },
              type: 'dotted'
            }
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      this.chartLine.setOption(option2)
    },
    // 获取7天内车流量和服务区信息
    async getSevenInfoData () {
      const result = await getSevenInfo()
      // console.log(result)
      // 赋值
      this.seventoflow = result.data.seventoflow
      this.seventtoincome = result.data.seventtoincome
      // console.log(this.seventoflow)
      // console.log(this.seventtoincome)
      // 动态给Echarts表格赋值
      option1.series[0].data.push(...this.seventoflow)
      option2.series[0].data.push(...this.seventtoincome)
    },
    // 获取收费站下拉信息列表
    async getTollSelectData () {
      const res = await getTollSelect()
      this.tollBooth = res.data
    },

    // // 根据时间和收费站ID返回收费站信息
    // async getInfoById () {
    //   // 判断是否是闰年,如果是闰年2月份 应该有29天
    //   // 在判断月份是否是1,3,5,7,8,10,12,如果是这个月应该有31天
    //   // 其他月份应该是30天
    //   let day
    //   if (this.monthValue === 1 || this.monthValue === 3 || this.monthValue === 5 || this.monthValue === 7 || this.monthValue === 8 || this.monthValue == 10 || this.monthValue == 12) {
    //     day = 31
    //   } else if (this.monthValue === 4 || this.monthValue === 6 || this.monthValue === 11 || this.monthValue === 9) {
    //     day = 30
    //   } else if (this.monthValue === 2) {
    //     if (this.yearValue % 4 === 0 && (this.yearValue % 100 !== 0 || this.yearValue % 400 === 0)) { // 闰年
    //       day = 29
    //     } else {
    //       day = 28
    //     }
    //   }
    //   const result = await this.$http.post(
    //     '/api/fictitious/Posttollboothtieminfo',
    //     {
    //       datetime: this.yearValue + '-' + this.monthValue + '-' + day,
    //       tollboothId: this.tollId
    //     }
    //   )
    //   console.log(result)
    //   this.tollInfo = result.data.data
    // },
    // 默认显示当天的信息
    async getNowInfo () {
      const time = new Date()
      console.log(time)
      const result = await this.$http.post(
        '/api/fictitious/Posttollboothtieminfo',
        {
          datetime:
              time.getFullYear() +
              '-' +
              (time.getMonth() + 1) +
              '-' +
              time.getDate(),
          tollboothId: this.tollId
        }
      )
      console.log(result)
      this.nowInfo = result.data.data
    },
    // 年份下拉框改变时
    handleChange (val, index) {
      this.yearValue = parseInt(val)
      // this.getInfoById()
    },
    // 月份下拉框改变时
    handleChangeMonth (val, index) {
      this.monthValue = parseInt(val)
      // this.getInfoById()
    },
    // 收费站下拉框改变时
    async changeToll (val, index) {
      this.tollId = index.data.key
      // 判断是否是闰年,如果是闰年2月份 应该有29天
      // 在判断月份是否是1,3,5,7,8,10,12,如果是这个月应该有31天
      // 其他月份应该是30天
      let day
      if (this.monthValue === 1 || this.monthValue === 3 || this.monthValue === 5 || this.monthValue === 7 || this.monthValue === 8 || this.monthValue == 10 || this.monthValue == 12) {
        day = 31
      } else if (this.monthValue === 4 || this.monthValue === 6 || this.monthValue === 11 || this.monthValue === 9) {
        day = 30
      } else if (this.monthValue === 2) {
        if (this.yearValue % 4 === 0 && (this.yearValue % 100 !== 0 || this.yearValue % 400 === 0)) { // 闰年
          day = 29
        } else {
          day = 28
        }
      }
      const result = await this.$http.post(
        '/api/fictitious/Posttollboothtieminfo',
        {
          datetime: this.yearValue + '-' + this.monthValue + '-' + day,
          tollboothId: this.tollId
        }
      )
      console.log(result)
      this.tollInfo = result.data.data
      console.log(this.tollInfo)
      // 选定收费站名称时,给echarts表格再赋值
      // const result1 = await this.$http.get('/api/fictitious/GetCarStatistics')
      // console.log(result1)
      const result1 = await getSevenInfo()
      // console.log(result)
      // 赋值
      this.seventoflow = result1.data.seventoflow
      this.seventtoincome = result1.data.seventtoincome
      // 动态给Echarts表格赋值
      option1.series[0].data.push(...this.seventoflow)
      option2.series[0].data.push(...this.seventtoincome)
    }
  }
}
</script>

<style scoped lang="less">
  /deep/ .ant-select-selection--single {
    background-color: #4783f1 !important;
    color: #fff;
  }

  .toll {
    margin-top: 19px;
    margin-bottom: 46px;

    .header {
      overflow: hidden;
      text-align: center;
      position: relative;
      color: #fff;
      margin-bottom: 15px;

      .left,
      .middle,
      .right {
        float: left;

        li:nth-child(1) {
          font-size: 15px;
          margin: 23px 16px 19px;
        }

        li:nth-child(3) {
          font-size: 15px;
          font-weight: 600;
          margin-bottom: 26px;
        }
      }

      .right {
        float: right;
      }

      .middle {
        position: absolute;
        top: 65px;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }

    .line {
      height: 15px;
      background-color: #f5f5f6;
    }

    .traffic,
    .income {
      padding-top: 12px;
      padding-left: 6px;
    }
  }
</style>
